<template>
    <div id="myorder">
      <div class="order">
        <!-- 我的订单 -->
        <div class="order-tab" style="width: 100%;position: fixed;top: 0;background-color: white;">
          <a class="order-tab-pink">全部</a>
          <!--<a>待付款</a>-->
          <!--<a>待发货</a>-->
          <!--<a>待收货</a>-->
          <!--<a>待评价</a>-->
        </div>
        <div style="width: 100%;height: 55px;"></div>
        <!-- 待付款 -->
        <!--<div class="common-form">-->
          <!--<div class="order-shop">-->
            <!--<p class="order-shop-tel"><i></i>李东东的店铺 <em>等待付款</em></p>-->
            <!--<a class="order-shop-info">-->
              <!--<img src="../../assets/2.jpg">-->
              <!--<div>-->
                <!--<p>百纳 新款2.4G合金遥控车四驱攀爬4G合金遥控车四驱攀爬</p>-->
                <!--<p>餐具套装（2人装），白色，1件</p>-->
                <!--<p>￥45.00 <del>￥100.00</del></p>-->
              <!--</div>-->
            <!--</a>-->
            <!--<div class="order-more">-->
              <!--<p>共1件商品  合计：￥45.00</p>-->
              <!--<a href="#" class="order-more-gary">取消订单</a>-->
              <!--<a href="#" class="order-more-pink">付款</a>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
        <!-- 待发货 -->
        <div class="common-form" style="margin: 0 auto;">
          <div class="order-shop" v-for="(item,index) in DataList"@click="ToBeShipped(index)"style="margin: 3% 3% 0 3%;">
            <p class="order-shop-tel"><i></i>商家店铺 <em><!--等待发货--></em></p>
            <a class="order-shop-info">
              <img :src="imgTitl+item.goods.thumb">
              <div>
                <p>{{item.goods.goods_goods_title}}</p>
                <p>{{item.goods.goods_spec}}1件</p>
                <!--<p>￥{{item.goods.goods_market_price}}</p>-->
                <p>￥{{item.extension_code == 1?item.goods.sell_price:item.goods.goods_market_price}}</p>
              </div>
            </a>
            <div class="order-more">
              <p>共1件商品  合计：￥{{item.extension_code == 1?item.goods.sell_price:item.goods.goods_market_price}}</p>
              <a href="#" class="order-more-gary"style="display: none;">提醒发货</a>
            </div>
            <div style="width: 100%;height: 5px;background-color: #f9f9f9;margin-top: 3%;"></div>
          </div>
        </div>
        <!-- 待收货 -->
        <!--<div class="common-form">-->
          <!--<div class="order-shop">-->
            <!--<p class="order-shop-tel"><i></i>李东东的店铺 <em>等待收款</em></p>-->
            <!--<a class="order-shop-info">-->
              <!--<img src="../../assets/2.jpg">-->
              <!--<div>-->
                <!--<p>百纳 新款2.4G合金遥控车四驱攀爬4G合金遥控车四驱攀爬</p>-->
                <!--<p>餐具套装（2人装），白色，1件</p>-->
                <!--<p>￥45.00 <del>￥100.00</del></p>-->
              <!--</div>-->
            <!--</a>-->
            <!--<div class="order-more">-->
              <!--<p>共1件商品  合计：￥45.00</p>-->
              <!--<a href="#" class="order-more-gary">提醒发货</a>-->
              <!--<a href="#" class="order-more-gary">延长物流</a>-->
              <!--<a href="#" class="order-more-pink">确认收货</a>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
        <!-- 待评价 -->
        <!--<div class="common-form">-->
          <!--<div class="order-shop">-->
            <!--<p class="order-shop-tel"><i></i>李东东的店铺 <em>等待评价</em></p>-->
            <!--<a class="order-shop-info">-->
              <!--<img src="../../assets/2.jpg">-->
              <!--<div>-->
                <!--<p>百纳 新款2.4G合金遥控车四驱攀爬4G合金遥控车四驱攀爬</p>-->
                <!--<p>餐具套装（2人装），白色，1件</p>-->
                <!--<p>￥45.00 <del>￥100.00</del></p>-->
              <!--</div>-->
            <!--</a>-->
            <!--<div class="order-more">-->
              <!--<p>共1件商品  合计：￥45.00</p>-->
              <!--<a href="#" class="order-more-gary">删除订单</a>-->
              <!--<a href="#" class="order-more-gary">再次购买</a>-->
              <!--<a href="#" class="order-more-pink">评价</a>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      </div>
    </div>
</template>

<script>
  import axios from 'axios';
  import qs from 'qs'

  export default {
    name: 'MyOrder',
    data(){
      return{
        imgTitl: 'http://39.96.76.3/HuiWanZhong/public/uploads/',
        DataList:[],
        GoodsList:[],
        good:[],
      }
    },
    created () {
      console.log(localStorage.getItem('openid'))
      axios.get('http://39.96.76.3/HuiWanZhong/public/index.php/team/index/getTeamOrderList?', {
        params: {
          'uId':localStorage.getItem('openid'),
        },
      }).then(response =>{
        this.DataList = response.data.data;
        console.log(this.DataList)
      }).catch(function (error) {
        console.log(error);
      });
    },
    methods:{
      ToBeShipped(index){
        this.$router.push({name: 'OrderDetails', params: {order_sn2:this.DataList[index].order_sn}});
        this.$router.push({name:'OrderDetails'});
      }
    }
  }
</script>


<style scoped>
  #myorder{

  }
  *{
    margin:0px;
    padding:0px;
    font-family:"微软雅黑","Microsoft YaHei";
    font-size:14px;
    color:#101010;
  }
  body{
    width:100%;
    background:#f9f9f9;
  }
  em,i{
    font-style: normal;
  }
  a{
    text-decoration: none;
  }
  input,textarea{
    outline: none;
  }
  .left{
    float:left;
  }
  .right{
    float:right;
  }
  .footer-100{
    width:100%;
    height:60px;
    display: inline-block;
  }
  /*底部菜单*/
  .footer a{
    width:20%;
    text-align: center;
    float: left;
  }
  .footer a p{
    font-size:13px;
  }
  .footer a:nth-child(1) i{
    display: inline-block;
    height: 22px;
    width: 20px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../assets/tab1-pink.png) no-repeat;
    background-size: 100%;
    margin-top: 5px;
    vertical-align: text-bottom;
  }
  .footer a:nth-child(2) i{
    display: inline-block;
    height: 22px;
    width: 18px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../assets/tab2.png) no-repeat;
    background-size: 100%;
    margin-top: 5px;
    vertical-align: text-bottom;
  }
  .footer a:nth-child(3) i{
    display: inline-block;
    height: 22px;
    width: 20px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../assets/tab3.png) no-repeat;
    background-size: 100%;
    margin-top: 5px;
    vertical-align: text-bottom;
  }
  .footer a:nth-child(4) i{
    display: inline-block;
    height: 22px;
    width: 20px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../assets/tab4.png) no-repeat;
    background-size: 100%;
    margin-top: 5px;
    vertical-align: text-bottom;
  }
  .footer a:nth-child(5) i{
    display: inline-block;
    height: 22px;
    width: 20px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../assets/tab5.png) no-repeat;
    background-size: 100%;
    margin-top: 5px;
    vertical-align: text-bottom;
  }
  /*确认订单*/
  .order-info{
    padding: 10px 8px;
    position: relative;
    display: inline-block;
  }
  .order-info-none{
    width:100%;
    height:90px;
    display: inline-block;
    color:#999;
    text-align: center;
    line-height: 90px;
  }
  .order-info-none em{
    font-size:20px;
    color:#999;
    vertical-align: bottom;
  }
  .order-info-a{
    position: absolute;
    right: 10px;
    top: 39%;
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../assets/jiantou.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    float: right;
  }
  .order-info-name{
    font-size:15px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .order-info-add label{
    float: left;
    width:14%;
    display: inline-block;
  }
  .order-info-add span{
    float: left;
    width:80%;
    display: inline-block;
  }

  .order-shop,.order-pay{
    width: 94%;
    margin: 3% auto;
    display: inline-block;
    margin-left: 3%;
  }
  .order-shop-tel{
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 10px;
    font-weight: 600;
  }
  .order-shop-tel i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../assets/cart.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    float: left;
    margin-right: 5px;
  }
  .order-shop-more{
    width: 100%;
    height: 38px;
    line-height: 38px;
    display: inline-block;
  }
  .order-shop div:nth-child(5) em,.order-shop div:nth-child(4) em,.order-shop div:nth-child(3) em,.order-shop div:nth-child(6) input{
    float: right;
  }

  .order-shop div:nth-child(6) input{
    width:100px;
    text-align: right;
    border:0;
    outline: none;
    padding: 10px 0;
  }
  .order-shop img{
    width:80px;
    height:80px;
    border-radius: 5px;
    float: left;
  }
  .order-shop-info{
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    margin-top:10px;
  }
  .order-shop-info div{
    float: left;
    margin-left: 2%;
    width: 71%;
  }
  .order-shop-info div p:nth-child(1){
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .order-shop-info div p:nth-child(2){
    color:#999;
    margin:10px 0;
    font-size:12px;
  }
  .order-shop-info div p:nth-child(3){
    color:#FE2746;
    font-weight: 600;
  }
  .order-shop-info div p:nth-child(3) del{
    color:#999;
    font-size:12px;
    font-weight: normal;
  }
  .order-pay{
    position: relative;
  }
  .order-pay img{
    width:40px;
    height:40px;
    float: left;
    border-radius: 50%;
  }
  .order-pay div{
    width: 60%;
    float: left;
    margin-left: 3%;
  }
  .order-pay div p:nth-child(2){
    color: #999;
    font-size: 12px;
    margin-top: 5px;
  }
  .order-pay em{
    width: 10px;
    height: 10px;
    display: inline-block;
    border: 1px solid rgba(187, 187, 187, 1);
    border-radius: 50%;
    position: absolute;
    top:36%;
    right: 10px;
  }
  .order-pay-pink{
    border: 1px solid #FE2746 !important;
    background: #FE2746;
  }
  .order-footer{
    position: fixed;
    bottom: 0;
    left:0;
    height:49px;
    line-height: 49px;
    width:100%;
    background: #FFF;
  }
  .order-footer div{
    width:67%;
    float: left;
    margin-left: 3%;
    background: #FFF;
  }
  .order-footer div span{
    color:#FE2746;
  }
  .order-footer div span em{
    font-size:15px;
    font-weight: 600;
    color:#FE2746;
  }
  .order-footer a{
    width:30%;
    float: left;
    background: #FE2746 ;
    text-align: center;
    color:#FFF;
  }

  /*我的订单*/
  .order-tab a{
    width: 20%;
    float: left;
    text-align: center;
    padding: 13px 0;
  }
  .order-tab-pink{
    color:#FC2847;
    font-weight: 600;
  }
  .order-more{
    width:100%;
    text-align: right;
  }
  .order-more p{
    font-size:12px;
  }
  .order-more-gary{
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    background-color: rgba(123, 123, 123, 0.08);
    color: #999;
    font-size: 12px;
    text-align: center;
    border: 1px solid rgba(238, 238, 238, 1);
    display: inline-block;
    padding: 0 10px;
    margin-top: 10px;
    margin-left: 10px;
  }
  .order-more-pink{
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    background-color: rgba(254, 39, 70, 0.08);
    color: #FC2847;
    font-size: 12px;
    text-align: center;
    border: 1px solid rgba(254, 39, 70, 0.08);
    display: inline-block;
    padding: 0 10px;
    margin-top: 10px;
    margin-left: 10px;
  }
  .order-shop-tel em{
    color: #FC2847;
    font-size:12px;
    float: right;
  }
</style>
